<!-- 日常测评的结果展示页 -->
<template>
	<view class="pageView">
		<!-- <image src="../static/stiati/icon.png" mode=""></image> -->
		<view class="kongs"></view>
		<view class="top">
			<heads :text="headlineTexts" :imgUrl="imgUrs3" :headScore="head_score"></heads>
			<view class="dis" >
				<view class="topimage dis  dis1 dis2">
					<image src="/static/image/hou_11.png" mode="aspectFit" class="images post2"></image>
					<image src="/static/image/qian_11.png" mode="aspectFit" class="images post1"></image>
					<view class="texts1">{{titleText}}</view>
				</view>
				<view class=""></view>
			</view>
		
			<view style="width: 100%;height: 200upx;">
				<radar :item="item" :isHeard="0"></radar>
			</view>

			<!-- <view class="texts2">调理方案</view> -->
		</view>
		<!-- 作死行为 -->
		<view class="update" v-if="actionlist.length>0">
			<view class="headerTop dis dis2">
				<image src="/static/stiati/icon.png" mode="aspectFit" class="icon"></image>
				<text class="texts1">请记住你的作死行为</text>
				<image src="/static/image/sanjiao.png" mode="aspectFit" class="sanjiao"></image>
				<text class="texts2">（别说我没告诉你）</text>
			</view>
			<view class="itemsList dis dis6">
				<block v-for="(item,index) in actionlist" :key="index">
					<view class="udItems contenr">{{item}}</view>
				</block>
			</view>
			<view class="bottoms">Look at me：如果最近恰好碰雷，那快通过记录获取拯救办法吧！</view>
			<view class="bottmBtns contenr" @click="goURls">
				<text>啥也别说了 快带我去</text>
				<image src="/static/image/left.png" mode="aspectFit" class="leftIcont"></image>
			</view>

		</view>
		<block v-for="(item,index) in  suggestion" :key="index">
			<view class="item">
				<heads :text="item.headline" :imgUrl="item.image"></heads>
				<view class="list ">
					<view class="textsList ">
						<block v-for="(i,index1) in item.content" :key="index1">
							<view class="avoid dis " :class="{'avoidBotm':index1 == item.content.length-1}">
								<view class="avoidLeft dis dis1 dis2">{{i.suitable}}</view>
								<view class="avoidRigth dis  dis2" :class="[index1==0?'border1':index1 == item.content.length-1?'border2':'']">{{i.avoid}}</view>
							</view>
						</block>
						<!-- <view class="activeText"> {{i.avoid}}</view> -->
					</view>
				</view>
				<view class="itemTexts" v-if="item.headline=='生活'">你也可以这样用</view>
				<view class="itemTexts" v-if="item.headline=='饮食'">你也可以这样吃</view>
				<block  v-for="(items,indexs) in consumerlist" :key="indexs">
				<view class="displi" v-if="items.type==item.headline">
					<view class="itemsComm dis dis2" @click="goProduct(items.type,items.id)" >
						<view class="commLef">
							<image :src="items.pic" mode="aspectFit"></image>
						</view>
						<view class="commCent">
							<view class="commtopTex">{{items.title}}</view>
							<view class="commcom_1 dis dis3 dis2">
								<block v-for="(i,indexs) in items.xiaoguo" :key="indexs">
									<view class="comm_12 contenr" v-if="indexs<2">{{i}}</view>
								</block>
							</view>
							<view class="commbotom"><text>参考价：{{items.price}}</text></view>
						</view>
						<view class="commRig dis dis1 dis2 dis5">
							<circle size='50' layer-color="#DDE5EE" v-model="items.score" :rate="100" :speed="100" color="#6E9DFF" :text="items.score_1"
							 select='2'></circle>
							<view class="contexz">匹配度</view>
						</view>
					</view>
				</view>
				</block>
			</view>
		</block>
		<view class="snacks">
			<view class="kongs"></view>
			<view class="snacksTop contenr">零食吃不对，养生反伤身哦~</view>
			<heads :text="headlineTexts_1" :imgUrl="imgUrs3_1"></heads>

			<view class="each dis">
				<block v-for="(item,index) in consumerlist" :key="index">
					<view class="eachItem dis dis1 dis2 dis5" v-if="item.type=='零食'" @click="goProduct(item.type,item.id)">
						<view class="topImag">
							<image :src="item.pic" mode="aspectFit"></image>
						</view>
						<view class="eachText contenr" :class="{eachTexts:item.title.length>12}">
							<text>{{item.title}}</text>
						</view>
						<view class="textItem dis dis1 dis2 dis5">
							<block v-for="(i,index1) in item.xiaoguo" :key="index1">
								<view class="textItems_1 contenr" v-if="index1<=1">{{i}}</view>
							</block>
							
						</view>
					</view>
				</block>
			</view>

		</view>
		<view class="kongs">

		</view>
	</view>
</template>

<script>
	let app = getApp().globalData;
	import heads from '@/components/head.vue';
	import config from '@/common/js/config.js';
	import radar from '@/components/radar.vue'
	import indexFx from '@/common/js/indexFx.js'
	export default {
		components: {
			heads,
			radar
		},
		data() {
			return {
				headText: '测评结果说明',
				imgUr: '/static/stiati/icon_1.png',
				headText1: '饮食调理',
				imgUr1: '/static/stiati/icon_6.png',
				headText2: '生活调理',
				imgUr2: '/static/stiati/icon_7.png',
				headText3: '穴位调理',
				imgUr3: '/static/stiati/icon_5.png',
				ensue: {},
				image: '',
				rongy: '',
				strings: '',
				actionlist: [], //作死行为
				titleText: '',
				suggestion: [],
				headlineTexts: '', //头部的文字
				head_score:0,
				imgUrs3: '', //头部的图片
				item: {}, //列表数据项
				headlineTexts_1: '对证的养生零食',
				imgUrs3_1: '/static/stiati/zhi.png',
				consumerlist:[],//商品
				id:-1,//维度id
				indexId:app.indexId,//是否与维度id相同
			};
		},
		created() {
		
		},
		onLoad(e) {
			this.titleText = e.text;
			this.headlineTexts = `${e.title}的结果`;
			this.head_score = e.score
			this.imgUrs3 = e.img;
			this.id =e.id;
			let that = this;
			this.item = app.itemRelust;
			this.setData()
			uni.setNavigationBarTitle({
				title: e.title
			});
		},
		methods: {
			setData() {
				let that = this;
				let ensue = app.ensue;
				this.actionlist = app.actionlist;
				let suggestion = ensue;
				console.log('suggestion', suggestion)
				let list = [];
				let image = '';
				for (let i in suggestion) {
					if (i.indexOf('饮食') != -1) {
						image = '/static/stiati/icon_6.png'
					} else if (i.indexOf('生活') != -1) {
						image = '/static/stiati/icon_7.png'
					} else if (i.indexOf('食谱') != -1) {
						image = '/static/stiati/icon_4.png'
					} else {
						image = '/static/stiati/icon_5.png'
					}
					list.push({
						headline: i,
						content: suggestion[i],
						image: image
					})
				}
				for (let i = 0; i < list.length; i++) {
					let good = [];
					for (let y in list[i].content) {
						if (list[i].content[y]) {
							list[i].content[y].replace(/\s+/g, '')
						}
						good.push({
							suitable: y,
							avoid: list[i].content[y]
						})
						if (y == '宜' || y == '忌') {
							list[i].isShow = 0
						} else {
							list[i].isShow = 1
						}
						if (list[i].headline.indexOf('饮食') != -1) {
							list[i].showImge = 1
						} else if (list[i].headline.indexOf('生活') != -1) {
							list[i].showImge = 2
						} else {
							list[i].showImge = 0
						}
					}
					list[i].content = good;
				}
				let consumerlist = app.itemList;
				let len1 = list.length;
				let s = 0;
				let leng = consumerlist.length;
				console.log('that.indexId',that.indexId)
				console.log('that.id',that.id)
					for (let j = 0; j < leng; j++) {
						consumerlist[j].score_1 = `${consumerlist[j].score}%`;
							if(!Array.isArray(consumerlist[j].xiaoguo)){
								console.log(consumerlist[j].xiaoguo)
								console.log(consumerlist[j].xiaoguo.split('\n'))
								consumerlist[j].xiaoguo = consumerlist[j].xiaoguo.split('\n');
							}
					}
				app.indexId =that.id
				this.suggestion = list;
				this.consumerlist = consumerlist
				console.log('ensue', ensue);
				console.log('list', list)
				this.ensue = ensue
			},
			goURls() {
				uni.reLaunch({
					url: '/pages/young/young'
				})
			},
			goProduct(type,id){
				if(!id){
					return
				}
				indexFx.basePoint(1,0)
				let ty =0;
				if(type=='零食'){
					ty=1
				}
				uni.navigateTo({
					url:`/second/yang/product/product?ty=${ty}&id=${id}`
				})
			}
			

		},
		onUnload() {
			app.itemRelust=null;
		},


	}
</script>

<style lang="scss" scoped>
	@import "../../common/css/flex.css";
	@import "../../common/css/index.scss";

	.pageView {
		background-color: #FCF3D7;


		.kongs {
			width: 100%;
			height: 62upx;
		}

		.top {
			width: 686upx;
			height: 401upx;
			background: #FFFFFF;
			border-radius: 24upx;
			margin: auto;
			margin-bottom: 32upx;
			padding-bottom: 50upx;

			.topimage {
				min-width: 100upx;
				height: 130upx;
				margin: auto;
				position: relative;
				padding:0 80upx;

				.images {
					width: 47upx;
					height: 33upx;
					position: absolute;
				}

				.post2 {
					bottom: 25upx;
					left: 0upx;
				}

				.post1 {
					top: 23upx;
					right: 0upx;
				}

				.texts1 {
					// width: 240upx;
					height: 84upx;
					font-size: 60upx;
					font-family: $typeface;
					font-weight: 500;
					color: #CB9749;
				}

			}

			.texts2 {
				width: 128upx;
				height: 45upx;
				font-size: 32upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #F3BF81;
				margin-top: -28rpx;
			}
		}

		.body {
			width: 686upx;
			height: 762upx;
			background: #FFFFFF;
			border-radius: 24upx;
			position: absolute;
			top: 48upx;
			left: 32upx;

			.contes {
				width: 622upx;
				height: 380upx;
				margin: auto;

				.left_1 {
					width: 352upx;
					height: 100%;


					.left_top {
						width: 100%;
						height: 230upx;
						font-size: 28upx;
						font-family: $typeface1;
						font-weight: 400;
						color: #666;
					}

					.active {
						width: 332upx;
						height: 120upx;

						position: relative;
						font-size: 60upx;
						font-family: $typeface;
						font-weight: 500;
						color: #3CC288;

						.imags1 {
							width: 36upx;
							height: 22upx;
							position: absolute;
							top: 10upx;
							left: 0;
						}

						.imags2 {
							width: 36upx;
							height: 22upx;
							position: absolute;
							bottom: 10upx;
							right: 0;
						}
					}
				}

				.rigth_1 {
					width: 270upx;
					height: 100%;

					.images {
						width: 270upx;
						height: 100%;
					}
				}
			}

			.bortm {
				width: 622upx;
				height: 200upx;
				// background: #F8F8F8;
				// border-radius: 16upx;
				margin: 29upx auto 0 auto;
				font-size: 28upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #666666;
				background: #FFFFFF;
				box-shadow: 0px 6upx 28upx 0px rgba(0, 0, 0, 0.07);
				border-radius: 16upx;
				border: 1px solid #F2F2F2;

				.borText1 {
					margin-left: 32upx;
					margin-right: 30upx;
				}

				.borText {
					color: #000;
					font-family: $typeface;
					font-weight: 500;
				}
			}
		}

		.kong {
			width: 100%;
			height: 518upx;
		}

		.update {
			width: 686upx;
			min-height: 470upx;
			background: #FFFFFF;
			border-radius: 32upx;
			margin: auto;
			padding-bottom: 36upx;

			.headerTop {
				width: 100%;
				height: 114upx;

				.icon {
					width: 44upx;
					height: 44upx;
					margin-left: 32upx;
					margin-right: 11upx;
				}

				.texts1 {
					height: 50upx;
					font-size: 36upx;
					font-family: $typeface;
					font-weight: 500;
					color: #333333;
					margin-right: 5upx;
				}

				.sanjiao {
					width: 17upx;
					height: 17upx;
					// margin-right: 16upx;
				}

				.texts2 {

					height: 37upx;
					font-size: 26upx;
					font-family: $typeface1;
					font-weight: 400;
					color: #999999;
				}
			}

			.itemsList {
				width: 622upx;
				margin: auto;
				margin-bottom: 32upx;
				min-height: 140upx;

				.udItems {
					// min-width: 168upx;
					height: 56upx;
					background: #333333;
					border-radius: 28upx;
					font-size: 26upx;
					font-family: $typeface;
					font-weight: 400;
					color: #FFFFFF;
					margin-right: 20upx;
					margin-bottom: 20upx;
					padding: 0 25upx;
				}
			}

			.bottoms {
				width: 610upx;
				height: 74upx;
				font-size: 26upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #999999;
				line-height: 37upx;
				margin: auto;
			}

			.bottmBtns {
				width: 323upx;
				height: 72upx;
				background: #FFD344;
				border-radius: 36upx;
				margin: auto;
				margin-top: 10upx;
				font-size: 26upx;
				font-family: $typeface;
				font-weight: 500;
				color: #333333;

				.leftIcont {
					width: 7upx;
					height: 15upx;
					margin-left: 11upx;
				}
			}

		}

		.item {
			width: 686upx;
			min-height: 372upx;
			background: #FFFFFF;
			border-radius: 24upx;
			margin: 0upx auto 30upx auto;
			margin-top: 32upx;
			padding-bottom: 10upx;

			.textsList {
				width: 622upx;
				min-height: 202upx;
				background: #FFF8F2;
				border-radius: 16upx;
				border: 1px solid #EAEAEA;
				margin: auto;

				.avoid {
					width: 100%;
					min-height: 80upx;
					border-bottom: 1upx solid #dfdfdf;

					.avoidLeft {
						width: 158upx;
						font-size: 28upx;
						font-family: $typeface;
						font-weight: 500;
						color: #333333;
					}

					.avoidRigth {
						width: 464upx;
						min-height: 120upx;
						background-color: #fff;
						font-size: 28upx;
						font-family: $typeface1;
						font-weight: 400;
						color: #837364;
						padding-left: 19upx;
						padding-right: 20upx;
					}

					.border1 {
						border-radius: 0 16upx 0 0;
					}

					.border2 {
						border-radius: 0 0 16upx 0;
					}
				}

				.avoidBotm {
					border-bottom: none;
				}

			}

			.itemTexts {
				width: 210upx;
				height: 42upx;
				font-size: 30upx;
				font-family: $typeface;
				font-weight: 500;
				color: #333333;
				margin: 60upx 0 16upx 32upx;
			}

			.displi {
				width: 90%;
				height: 230upx;
				margin: auto;

				.itemsComm {
					width: 622upx;
					height: 200upx;
					background: #FFFFFF;
					box-shadow: 0px 8upx 28upx 0px rgba(0, 0, 0, 0.06);
					border-radius: 16upx;
					border: 1upx solid #F4F4F4;

					.commLef {
						width: 168upx;
						height: 168upx;
						background: #FFFFFF;
						border-radius: 8upx;
						margin-left: 16upx;

						image {
							width: 168upx;
							height: 168upx;
							border-radius: 8upx;
						}
					}

					.commCent {
						width: 252upx;
						height: 168upx;
						margin-left: 16upx;

						.commtopTex {
							height: 68upx;
							font-size: 28upx;
							font-family: $typeface;
							font-weight: 500;
							color: #333333;
						}

						.commcom_1 {
							width: 252upx;
							height: 39upx;
							margin-top: 19upx;

							.comm_12 {
								min-width: 116upx;
								height: 39upx;
								background: #FFF6D9;
								border-radius: 6upx;
								font-size: 24upx;
								font-family: $typeface;
								font-weight: 500;
								color: #BD9C30;
							}

						}

						.commbotom {
							min-width: 185upx;
							height: 33upx;
							font-size: 24upx;
							font-family: $typeface1;
							font-weight: 400;
							color: #999999;
							margin-top: 10upx;
							overflow:hidden; //超出的文本隐藏
							text-overflow:ellipsis; //溢出用省略号显示
							white-space:nowrap;
						}
					}

					.commRig {
						// width: 90upx;
						// height: 90upx;
						background: #FFFFFF;
						margin-left: 40upx;

						.contexz {
							width: 66upx;
							height: 30upx;
							font-size: 22upx;
							font-family: $typeface1;
							font-weight: 400;
							color: #C1C1C1;
							// margin-top: 10upx;
						}
					}

				}
			}

		}

		.items {
			width: 686upx;
			min-height: 453upx;
			background: #FFFFFF;
			border-radius: 24upx;
			margin: 30upx auto;

			.listItem {
				width: 620upx;
				min-height: 177upx;
				margin: auto;

				.listImg {
					width: 166upx;
					height: 120upx;

					.uimgs {
						width: 102upx;
						height: 102upx;
					}
				}

				.listText {
					width: 410upx;
					min-height: 120upx;
					font-size: 28upx;
					font-family: $typeface1;
					font-weight: 400;
					color: #333333;
				}
			}

			.list_12 {
				border-bottom: 1px dashed #999;
			}
		}

		.bodItem {
			width: 686upx;
			min-height: 260upx;
			background: #FFFFFF;
			border-radius: 24upx;
			margin: 32upx auto;

			.itemsBody {
				width: 620upx;
				min-height: 60upx;
				margin: auto;
				font-size: 28upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #666666;

				.linText {
					line-height: 50upx;
					padding-bottom: 20px;
					color: #666;

					.suitable {
						color: #333;
						font-weight: 500;
						font-family: $typeface;
					}

				}

				.linText2 {
					padding-bottom: 10upx;
					// margin-bottom: 40upx;
				}
			}
		}

		.snacks {
			width: 686upx;
			height: 576upx;
			background: #FFFFFF;
			border-radius: 24upx;
			margin: auto;
			margin-top: 24upx;

			.kongs {
				width: 100%;
				height: 32upx;
			}

			.snacksTop {
				width: 382upx;
				height: 52upx;
				background: #F3F5FF;
				border-radius: 12upx;
				margin: auto;
				font-size: 24upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #8993B9;
			}

			.each {
				width: 100%;
				height: 366upx;

				.eachItem {
					width: 194upx;
					height: 346upx;
					background: #FFFFFF;
					box-shadow: 0px 8upx 28upx 0px rgba(0, 0, 0, 0.07);
					border-radius: 16upx;
					border: 1upx solid #F4F4F4;
					margin-left: 25upx;

					.topImag {
						width: 168upx;
						height: 168upx;

						image {
							width: 168upx;
							height: 168upx;
						}
					}

					.eachText {
						width: 162upx;
						height: 60upx;
						font-size: 26upx;
						font-family: $typeface;
						font-weight: 500;
						color: #333333;
						margin-top: 8upx;
						margin-bottom: 12upx;						
					}
					.eachTexts {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}

					.textItem {
						width: 100%;
						height: 75upx;

						.textItems_1 {
							min-width: 104upx;
							height: 34upx;
							margin-bottom: 8upx;
							background: #F8F8F8;
							border-radius: 6upx;
							font-size: 22upx;
							font-family: $typeface1;
							font-weight: 400;
							color: #999999;
						}
					}
				}
			}
		}

		.kongs {
			width: 100%;
			height: 32upx;
		}
	}
</style>
